<script setup>
import { reactive, ref, onMounted } from 'vue'
import { delbeautiful } from '@/utils/api.js'
import { ElMessage, ElLoading, ElMessageBox } from 'element-plus'
import { Delete, Download, Plus, ZoomIn, Check, Close } from '@element-plus/icons-vue'
import wlsPopup from '@/components/common/wls-popup.vue'
// import delimg from '@/assets/images/del.png'
import shipin from '@/assets/img/shipin.jpg'
const emit = defineEmits(['refreshcar'])
const token = ref('')
const uploadRef = ref(null)
const actionUrl = ref('null')

const fileList = ref([])
const disabled = ref(false)

const fitem = ref(null);

let areaId = "";
let imeiList = [];
const isup = ref(false);

const ivlist = ref([])

const handleRemove = (file) => {
    console.log(file[0].type)
    console.log(fileList.value)
    fileList.value = fileList.value.filter(item => item.uid !== file.uid);
}

const handleError = (err) => {
    console.log(err);
    uploadRef.value.clearFiles = function () {
        console.log(err);
    };
}

const handleSuccess = (res) => {
    console.log(res);
}


const submitForm = async () => {
    uploadRef.value.submit();

}

const resetForm = () => {
    uploadRef.value.clearFiles();
    fileList.value = [];
    emit('refreshcar', '')
    isup.value = false
}

const open = (item) => {
    fitem.value = item;
    ivlist.value = [];
    isup.value = true
}



const isim = (data) => {
    if (data) {
        let str = data.split('/')[0]
        if (str === 'video') {
            return 1
        } else {
            return 2
        }
    }
}

const delu = async (item, index) => {
    let res = await delbeautiful(item)
    if (res.code == '200') {

    }

    console.log(fitem.value.imgs);
    fitem.value.imgs.splice(index, 1);
}

onMounted(() => {
    areaId = window.sessionStorage.getItem('areaId');
    token.value = window.sessionStorage.getItem('token')
})

defineExpose({ open })

</script>
<template>
    <wls-popup v-if="isup">
        <div class="wls-u">
            <div class="d-lkb-c" @click.stop="resetForm()">
                <i class="icon iconfont icon-guanbi" style="color: #387BFF;font-size:20px;"></i>
            </div>
            <div class="qzTitle">
                <div></div>
                <div><span>上传{{ fitem.typetx }}</span></div>
            </div>

            <div class="wls-u-siv scol" v-if="fitem.imgs[0] && fitem.imgs[0].hasOwnProperty('id')">
                <div style="overflow: hidden;">
                    <span style="line-height: 3;">精彩照片列表</span>
                    <!-- <span style="color:#999;margin-left: 16px;">({{ fitem.imgs.length }}/10)</span> -->
                </div>
                <ul class="wls-u-ul">
                    <li v-for="(i, index) in fitem.imgs" :key="i.id">
                        <div class="d-lkb-c" @click.stop="delu(i.id, index)"
                            style=" padding: 0 5px; background-color: #000; top: 4px;right: 4px;">
                            <el-icon style=" line-height: 2; font-size: 16px;color: red;">
                                <Delete />
                            </el-icon>
                        </div>

                        <video v-if="i.type === 'video'" :src="i.path"></video>
                        <img v-else :src="i.path" alt="">


                    </li>
                </ul>
            </div>
            <div style="height: 24px"></div>
            <div class="wls-u-siv scol">
                <el-upload ref="uploadRef" v-model:file-list="fileList" :auto-remove="false" :multiple="true"
                    action="/api/admin/resource/uploadByResource" :headers="{ Authorization: token }"
                    :data="{ resourceId: fitem.resourceId, identifyUser: '', resourceType: fitem.resourceType, type: fitem.type, lon: fitem.lon, lat: fitem.lat, altitude: fitem.altitude }"
                    :auto-upload="false" list-type="picture-card" :on-success="handleSuccess" :on-error="handleError">
                    <el-icon>
                        <Plus />
                    </el-icon>

                    <template #file="{ file }">
                        <!-- file.name.startsWith('video/') ? shipin : -->
                        <img class="el-upload-list__item-thumbnail"
                            :src="file.name.endsWith('.mp4') ? shipin : file.url" alt="" />
                        <div v-if="file.status === 'uploading'">{{ file.percentage }}
                            <!-- <img :src="file.url" class="el-upload-list__item-thumbnail"> -->
                            <el-progress type="dashboard" :percentage="Math.floor(file.percentage)" />
                            <!-- <div class="el-upload-list__item-status-label">
                            
                        </div> -->
                        </div>
                        <div v-else-if="file.status === 'success'">
                            <!-- <img :src="file.url" class="el-upload-list__item-thumbnail"> -->
                            <div class="el-upload-list__item-status-label" style="color: #fff;">
                                <el-icon>
                                    <Check />
                                </el-icon>
                            </div>
                        </div>
                        <div v-else-if="file.status === 'error'">
                            <!-- <img :src="file.url" class="el-upload-list__item-thumbnail"> -->
                            <div class="el-upload-list__item-status-label" style="color: red;">
                                <el-icon>
                                    <Close />
                                </el-icon>
                            </div>
                        </div>

                        <!-- <span class="el-upload-list__item-actions">
                            <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                                <el-icon>
                                    <Delete />
                                </el-icon>
                            </span>
                        </span> -->
                    </template>

                </el-upload>

            </div>

            <div style="margin: 16px 0;display: flex;align-items: center;justify-content: center;">
                <el-button style="background-color: #387BFF;color: #fff;" @click.stop="submitForm()">开始上传</el-button>
                <el-button @click.stop="resetForm()">上传完成</el-button>
            </div>
        </div>
    </wls-popup>
</template>
<style scoped>
.wls-u {
    width: 700px;
    padding: 24px;
    background-color: #fff;
    position: relative;
    overflow: hidden;
}


.d-lkb-c {
    position: absolute;
    top: -5px;
    right: 0;
    z-index: 2;
    cursor: pointer;
}

.wls-u-btn {
    width: 100%;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    color: #387BFF;
    position: relative;
}

.wls-u-siv {
    width: 100%;
    max-height: 500px;
}

.wls-u-ul {
    width: 100%;
    overflow: hidden;
}

.wls-u-ul li {
    width: calc((100% - 48px) / 4);
    height: 120px;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000;
    margin: 0 16px 16px 0;
    position: relative;
    overflow: hidden;
}

.wls-u-ul li img {
    width: 100%;
    height: 100%;
}

.wls-u-ul li video {
    max-width: 100%;
    max-height: 100%;
}

.wls-u-ul li:nth-child(4n) {
    margin-right: 0;
}
</style>